<template>
  <div>
    <button @click="isShow1 = !isShow1">切换1</button>
<transition name="show1">
      <div v-if="isShow1" class="box"></div>
    </transition>

    <button @click="isShow2 = !isShow2">切换2</button>
    <transition name="show2">
      <div v-if="isShow2" class="box"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return {
      isShow1:true,
      isShow2:true
    }
  }
};
</script>

<style scoped>
.box {
  width: 300px;
  height: 300px;
  background-color: yellowgreen;
}

/* 如果我们是按照进入动画封装的关键帧动画,则from就是进来之前的样式,to就是进入之后的样式(to不用写) */
@keyframes enter {
  from {
    transform: translate(100px, 100px) rotate(360deg);
    opacity: 0;
    background: pink;
  }
  50% {
    transform: translate(100px, 0px) rotate(360deg);
    opacity: 0.3;
    background: blue;
  }
  to {
  }
}

/* 使用进入时的类,控制进入动画 */
.show1-enter-active {
  animation: enter 1s linear;
}
.show1-leave-active {
  animation: enter 1s linear reverse;
}

.show2-enter-active {
  animation: enter 2s linear;
}
.show2-leave-active {
  animation: enter 2s linear reverse;
}
</style>
